<template>
  <el-tab-pane :label="$t('message.dcgl')" name="first">
    <div class="warnningTip">
      <i class="el-icon-warning-outline" />
      {{ $t('message.dcgnsypz') }}
    </div>
    <el-tabs v-model="activeTwo" @tab-click="tabClick">
      <el-tab-pane
        v-for="item in ctList"
        :key="item.id"
        :label="item.name"
        :name="item.id"
      />
      <el-table
        ref="table"
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        :header-row-class-name="'table-header'"
        class="doumee-element-table"
      >
        <el-table-column align="center" :label="$t('message.cztp')" min-width="120">
          <template slot-scope="scope">
            <el-image
              shape="circle"
              style="width: 50px; height: 50px;border-radius: 50%;display: flex;justify-content: center;align-items: center;"
              fit="cover"
              :src="scope.row.picture"
              :preview-src-list="[scope.row.picture]"
            >
              <div slot="error" class="image-slot">
                <i class="el-icon-picture" />
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :label="$t('message.czmc')"
          min-width="140"
          show-overflow-tooltip
        >
          <template slot-scope="{row}">
            <el-button type="text" @click="showDetail(row.id)">{{ row.name }}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :label="$t('message.czh')"
          min-width="100"
          prop="tableNo"
        />
        <el-table-column
          align="center"
          :label="$t('message.zws')"
          min-width="100"
          prop="seatNum"
        />
        <el-table-column align="center" :label="$t('message.yczt')" min-width="120">
          <template slot-scope="{ row }">
            {{ useStatusToStr(row.useStatus) }}
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('message.zfzt')" min-width="120">
          <template slot-scope="{ row }">
            {{ payStatusToStr(row.payStatus) }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :label="$t('message.caozuo')"
          min-width="210"
          fixed="right"
        >
          <template slot-scope="{ row }">
            <el-button
              v-if="row.useStatus != 0 && row.useStatus != 1 && meta.indexOf('OrderingHZBtn') > -1"
              v-preventReClick
              type="text"
              @click="exchange(row)"
            >{{ $t('message.huanzhuo') }}</el-button>
            <el-button
              v-if="
                row.payStatus == 0 &&
                  (row.useStatus == 2 || row.useStatus == 3)&& meta.indexOf('OrderingZFBtn') > -1
              "
              v-preventReClick
              type="text"
              @click="payAction(row.id, row.useStatus)"
            >{{ $t('message.zf') }}</el-button>
            <el-button
              v-if="row.useStatus == 3 && meta.indexOf('OrderingJCBtn') > -1"
              v-preventReClick
              type="text"
              @click="oerder(row.id)"
            >{{ $t('message.jc') }}</el-button>
            <el-button
              v-if="row.useStatus != 0 && meta.indexOf('OrderingHFBtn') > -1"
              v-preventReClick
              type="text"
              @click="recover(row.id)"
            >{{ $t('message.hf') }}</el-button>
            <el-button
              v-if="row.useStatus == 0 && meta.indexOf('OrderingDCBtn') > -1"
              v-preventReClick
              type="text"
              @click="oerder(row.id)"
            >{{ $t('message.dc') }}</el-button>
            <el-button
              v-if="row.useStatus == 0 && meta.indexOf('OrderingYYBtn') > -1"
              v-preventReClick
              type="text"
              @click="appointment(row)"
            >{{ $t('message.yuyue') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :total="totalCount"
        :page="pagination.page"
        @current-change="handleCurrentChange"
        @SizeChange="handleSizeChange"
      />
    </el-tabs>
    <el-dialog
      :title="$t('message.huanzhuo')"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      width="600px"
      :visible.sync="showExchange"
    >
      <el-form
        ref="exchangeForm"
        :model="exchangeForm"
        :rules="exchangeRules"
        label-suffix="："
        label-width="auto"
        @submit.native.prevent
      >
        <el-form-item :label="$t('message.dqcz')" prop="goodsTableName">
          {{ exchangeForm.goodsAreaName }} - {{ exchangeForm.goodsTableName }}
        </el-form-item>
        <el-form-item :label="$t('message.ghcz')" prop="goodsTableId2">
          <el-select v-model="exchangeForm.goodsTableId2" :placeholder="$t('message.qxz')" style="width: 100%">
            <el-option
              v-for="item in canUseTables"
              :key="item.id"
              :label="item.goodsAreaName + ' - ' + item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showExchange = false">{{ $t('message.qx') }}</el-button>
        <el-button v-preventReClick type="primary" @click="confirmExchange">{{ $t('message.qr') }}</el-button>
      </div>
    </el-dialog>
  </el-tab-pane>
</template>
<script>
import { goodsTableList, goodsTableExchange } from '@/api'
import store from '@/store'
export default {
  data() {
    return {
      modalDialog: store.getters.dialog,
      activeTwo: '',
      ctList: [],
      listLoading: false,
      list: [],
      pagination: {
        page: 1,
        rows: 10
      },
      totalCount: 0,
      exchangeForm: {},
      exchangeRules: {
        goodsTableId2: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.cz'), trigger: 'change' }
        ]
      },
      canUseTables: []
    }
  },
  methods: {
    tabClick() {
      this.handleCurrentChange(1)
    },
    showDetail(id) {
      this.$router.push({ name: 'OrderingDetail', query: { id }})
    },
    handleSizeChange(value) {
      this.pagination.rows = value
      this.handleCurrentChange(1)
    },
    useStatusToStr(status) {
      switch (status) {
        case '0': return this.$t('message.kx')
        case '1': return this.$t('message.yyy')
        case '2': return this.$t('message.dcz')
        case '3': return this.$t('message.yxd')
        default: return '-'
      }
    },
    payStatusToStr(status) {
      switch (status) {
        case '0': return this.$t('message.wzf')
        case '1': return this.$t('message.ypay')
        case '2': return this.$t('message.bfzf')
        default: return '-'
      }
    },
    handleCurrentChange(page) {
      if (page) {
        this.pagination.page = page
      }
      this.listLoading = true
      goodsTableList({
        pagination: { ...this.pagination },
        param: {
          venueId: sessionStorage.getItem('venueId'),
          goodsRestaurantId: this.activeTwo,
          status: '1'
        }
      })
        .then(res => {
          this.listLoading = false
          if (res.errorCode === '000000') {
            this.list = res.recordList
            this.totalCount = res.totalCount
            this.$refs.table.doLayout()
          }
        })
        .catch(() => { this.listLoading = false })
    },
    exchange(row) {
      this.exchangeForm.goodsTableName = row.name
      this.exchangeForm.goodsAreaName = row.goodsAreaName
      this.exchangeForm.goodsTableId1 = row.id
      this.showExchange = true
      goodsTableList({
        param: {
          venueId: sessionStorage.getItem('venueId'),
          status: '1',
          useStatus: '0'
        }
      })
        .then(res => {
          if (res.errorCode === '000000') {
            this.canUseTables = res.recordList
          }
        })
    },
    confirmExchange() {
      this.$refs.exchangeForm.validate((v) => {
        if (v) {
          goodsTableExchange({ param: { ...this.exchangeForm }})
            .then(res => {
              if (res.errorCode === '000000') {
                this.$message.success(this.$t('message.hzcg'))
                this.$refs.exchangeForm.resetFields()
                this.showExchange = false
                this.handleCurrentChange(1)
              }
            })
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>

</style>